package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Popover() {
	@layouts.DocsLayout(
		"Popover",
		"Displays rich content in a floating layer. Powered by Floating UI.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Trigger & Closing",
						ID:   "trigger-closing",
					},
					{
						Text: "Positions",
						ID:   "positions",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "trigger",
						Text: "Trigger",
					},
					{
						ID:   "content",
						Text: "Content",
					},
				},
			},
			{
				ID:   "javascript-api",
				Text: "JavaScript API",
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Popover",
			Description: templ.Raw(`Displays rich content in a floating layer. Powered by <a href="https://floating-ui.com/" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Floating UI</a>.`),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Popover",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.PopoverDefault(),
				PreviewCodeFile: "popover_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "popover",
					JSFiles:       []string{"popover"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Trigger & Closing",
					ShowcaseFile:    showcase.PopoverTriggers(),
					PreviewCodeFile: "popover_triggers.templ",
					ID:              "trigger-closing",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Positions",
					ShowcaseFile:    showcase.PopoverPositions(),
					PreviewCodeFile: "popover_positions.templ",
					ID:              "positions",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="trigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Trigger",
						Description: "Element that triggers the popover when interacted with.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the trigger element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the trigger.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the trigger element.",
								Required:    false,
							},
							{
								Name:        "For",
								Type:        "string",
								Default:     "",
								Description: "ID of the popover content this trigger controls.",
								Required:    true,
							},
							{
								Name:        "TriggerType",
								Type:        "TriggerType",
								Default:     "click",
								Description: "How the popover is triggered. Options: 'click', 'hover'.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="content" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Content",
						Description: "Container for the popover content with positioning and behavior options.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the content element.",
								Required:    true,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the content.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the content element.",
								Required:    false,
							},
							{
								Name:        "Placement",
								Type:        "Placement",
								Default:     "bottom",
								Description: "Position of the popover relative to trigger. Options: 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'.",
								Required:    false,
							},
							{
								Name:        "Offset",
								Type:        "int",
								Default:     "4 (or 8 with arrow)",
								Description: "Distance in pixels between the trigger and popover content.",
								Required:    false,
							},
							{
								Name:        "DisableClickAway",
								Type:        "bool",
								Default:     "false",
								Description: "Prevents closing the popover when clicking outside.",
								Required:    false,
							},
							{
								Name:        "DisableESC",
								Type:        "bool",
								Default:     "false",
								Description: "Prevents closing the popover with the ESC key.",
								Required:    false,
							},
							{
								Name:        "ShowArrow",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to show an arrow pointing to the trigger element.",
								Required:    false,
							},
							{
								Name:        "HoverDelay",
								Type:        "int",
								Default:     "0",
								Description: "Delay in milliseconds before showing on hover (for hover triggers).",
								Required:    false,
							},
							{
								Name:        "HoverOutDelay",
								Type:        "int",
								Default:     "0",
								Description: "Delay in milliseconds before hiding on hover out (for hover triggers).",
								Required:    false,
							},
							{
								Name:        "MatchWidth",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the popover should match the width of the trigger element.",
								Required:    false,
							},
							{
								Name:        "Exclusive",
								Type:        "bool",
								Default:     "false",
								Description: "When true, opening this popover will close other exclusive popovers.",
								Required:    false,
							},
						},
					})
				</div>
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "JavaScript API",
				ID:    "javascript-api",
			}) {
				@modules.Code(modules.CodeProps{
					Language: "javascript",
					CodeContent: `// Open a popover programmatically
window.tui.popover.open("popover-id");

// Close a popover
window.tui.popover.close("popover-id");

// Close all popovers (optionally except one)
window.tui.popover.closeAll(); // Closes all
window.tui.popover.closeAll("popover-id"); // Closes all except "popover-id"

// Toggle popover state
window.tui.popover.toggle("popover-id");

// Check if popover is open (returns true/false)
const isOpen = window.tui.popover.isOpen("popover-id");`,
				})
			}
		}
	}
}
